import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';

@Component({
  selector: 'apes-content',
  template: `
    <!--<div class="{{prefixCls}} scroll-host">-->
    <!--<ng-content></ng-content>-->
    <!--</div>-->
    <apes-relevancy-link [relevancy]="relevancy"></apes-relevancy-link>

    <apes-scrollPanel [apesStyle]="{width:apesWidth}" [apesClass]="apesPrefixCls">
      <div class="scroll-panel-div">
        <ng-content></ng-content>
      </div>
    </apes-scrollPanel>
  `,
  styles: [`
    .scroll-panel-div {
      padding: 50px 4px 8px;
    }
  `],
})

export class ApesContentComponent implements OnInit, AfterViewInit {
  prefixCls = 'apes-content';

  @Input() apesPrefixCls: any = 'apes-content';

  @Input() apesOffset: number = 0;

  @Input() apesHeight: string;
  @Input() apesWidth: string = '100%';

  @Input() relevancy: any;

  constructor(private el: ElementRef, private renderer: Renderer2) {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    // // 获取 content 元素
    // // let content = document.querySelector('.content');
    // let apesContent = document.querySelector('.apes-content');
    //
    // setTimeout(() => {
    //   // let height = this.el.nativeElement['offsetHeight'] + 8;
    //   // header:48,tabs:52,button:35,contentTop:8,contentBottom:8;
    //   let apesContentHeight = window.document.body['clientHeight'] - (48 + 52 + 35 + 8 + 8);
    //   // this.renderer.setStyle(content, 'paddingTop', 35 + height + 'px');
    //   this.renderer.setStyle(apesContent, 'height', apesContentHeight + 'px');
    // }, 100);

    let content = document.querySelector('.content');
    let contentHeight;
    let apesContainer = document.querySelector('.' + this.apesPrefixCls);
    // let apesContainerHeight;
    if (this.apesHeight) {
      // apesContainerHeight = this.apesHeight;
      contentHeight = this.apesHeight;
    } else {
      // apesContainerHeight = window.document.body[ 'clientHeight' ] - this.apesOffset +'px';
      // header:48,tabs:52,button:35,contentTop:8,contentBottom:8;
      // apesContainerHeight = window.document.body[ 'clientHeight' ] - (48 + 52 + 35 + 8 + 8) +'px';
      console.log();
      let relevancy = 0;
      if (this.relevancy) {
        relevancy = 80;
      }
      contentHeight = content['clientHeight'] - relevancy + 'px';
    }

    setTimeout(() => {
      this.renderer.setStyle(apesContainer, 'height', contentHeight);
      // this.renderer.setStyle(apesContainer, 'height', apesContainerHeight);
    }, 500);
  }
}
